<!-- 生产工单 -->
<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { Workorder } from '#/api';

import { useVbenModal } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getWorkorderTableList } from '#/api';

import { useWorkorderColumns, useWorkorderScheam } from './data';

const [SearchModal, searchModalApi] = useVbenModal({
  class: 'w-[900px] h-[500px]',
  closeOnClickModal: false,
  onCancel() {
    searchModalApi.close();
  },
  onConfirm() {
    searchModalApi.setData(gridApi.grid.getRadioRecord());
    searchModalApi.close();
  },
});

/* 搜索表单配置 */
const formOptions: VbenFormProps = {
  wrapperClass: 'grid grid-cols-4',
  // 默认展开
  collapsed: false,
  schema: useWorkorderScheam(),

  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '搜索',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

/* 表格配置 */
const gridOptions: VxeGridProps<Workorder.Row> = {
  columns: useWorkorderColumns(),
  checkboxConfig: {
    highlight: true,
  },
  // 虚拟滚动配置项
  virtualYConfig: { enabled: true },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    layouts: [
      'Total',
      'Sizes',
      'PrevJump',
      'PrevPage',
      'Number',
      'NextPage',
      'NextJump',
      'FullJump',
    ],
    align: 'right',
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await getWorkorderTableList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          workorderType: 'SELF',
          status: 'CONFIRMED',
          ...formValues,
        });
        return { items: res.rows, total: res.total };
      },
    },
  },
  tooltipConfig: {
    // 是否开启全局文本提示
    showAll: false,
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    custom: true,
    zoom: true,
    refresh: { code: 'query' },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
</script>
<template>
  <SearchModal title="工单选择" centered>
    <div class="vp-raw w-full">
      <Grid />
    </div>
  </SearchModal>
</template>
<style scoped></style>
